<template>
  <div>
    <nav-bar title="搜索结果" />
    <div
      v-if="flag"
      class="loading"
    >
      <van-loading type="spinner" />
      Loading...
    </div>
    <van-empty
      v-else-if="!searchResult"
      image="error"
      description="请求错误"
    />
    <div
      v-else-if="!searchResult.length"
      class="empty"
    >
      暂无数据
    </div>
    <article-list
      v-else
      :data="searchResult"
    />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  name: 'SearchResult',
  computed: {
    ...mapState('search', [
      'searchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updateSearchReault',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH',
    ]),
  },
  // async created() {
  //   this.flag = true;
  //   await this.updateSearchReault(this.$route.query.q);
  //   this.flag = false
  // }
  async created() {
    // // 路由实例
    // console.log(this.$router);
    // // 当前路由信息
    // console.log(this.$route.query.q);
    this.flag = true;
    await this.updateSearchReault(this.$route.query.q);
    this.flag = false;
  },
  updated() {
    // if (this.searchResult.length === 0) {
    //   this.err = true;
    // }
  },
  beforeDestroy () {
    this.SET_SEARCH([]);
  },
  data() {
    return {
      flag: true,
    };
  },
}
</script>

<style lang="less" scoped>
.public-style {
  width: 100%;
  text-align: center;
  color: #aaa;
  margin-top: 100px;
}
.loading {
  .public-style
}
.empty {
  .public-style
}
</style>
